<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"
              th:href="@{/static/layui/css/layui.css}"/>
        <link rel="stylesheet" type="text/css" href="/static/css/part1.css"
              th:href="@{/static/css/part1.css}"/>
        <link rel="stylesheet" type="text/css" href="/static/css/part2.css"
              th:href="@{/static/css/part2.css}"/>
        <title>书架</title>
    </head>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        a{
            text-decoration: none;
        }
    </style>
    <body>
        <div th:replace="~{index/index::part1}"></div>
        <p id="divide" class="layui-icon">&#xe60a;我的书架</p>
        <div class="part2" >
            <p th:if="${list.size()}==0" style="text-align: center">暂无书籍</p>
            <div id="item" th:each="item,status : ${list}" th:with="shelf=${shelfList[status.index]}"
                 th:class="${status.count%2!=0}?'fl-left':'fl-right'" class="fl-right">
                <div id="book" >
                    <div id="cover">
                        <a href="#" target="_blank" th:href="|@{/chapter/read/}${item.id}/${shelf.sort}|">
                            <img th:src="${item.cover}"
                                 src="http://www.shuquge.com/files/article/image/86/86786/86786s.jpg"
                                 th:alt="${item.bookName}" alt="暗影统领的公主妻">
                        </a>
                    </div>
                    <div id="bookinfo">
                        <div id="bookname">
                            <a th:text="${item.bookName}" href="#" th:href="|@{/chapter/info/}${item.id}|"
                               target="_blank">暗影统领的公主妻</a>
                        </div>
                        <div id="booklink">
                            <!--KDX TODO 2023/6/5:尚未开发-->
                            <a th:text="${item.author}" href="" target="_blank">白白颜卿</a><span>|</span>
                            <a th:text="${item.type}" href="" target="_blank">历史军事</a><span>|</span>
                            <em th:text="${item.state}">
                                连载中
                        	</em><span>|</span>
                            <em th:text="${#dates.format(item.createDate, 'yyyy-MM-dd HH:mm')}">
                            更新时间&nbsp;&nbsp;2019-12-14T08:08:27.000+0000
                            </em>
                        </div>
                        <div th:text="${item.introduce}" id="bookintro">
                            　　颜乐蓄谋已久的逃离控制着她生活的杀手组织，孤注一掷的想摆脱成为傀儡的命运，却未曾想到那夜的转机，改变了她早已被人安排的命盘，但她又好似陷入另一个旋涡......　　云衡王朝，皇帝亲立抗暝司，寓意破除灰暗，执掌光明，凌驾于一切官府。
                            穆凌绎身为抗暝司统领最大职责是找回王朝唯一的异姓公主，这断了十几年的线索突然再一名女刺客身上明朗了......　　爱而不得的苏祁琰，此后一生有谁能陪伴在不老的他心里呢.......　　皇宫深院，有多少事都陷进了黑暗的阴谋之中......　　江湖传说暗影却是心上之人......　　并肩疆场杀敌之后......……
                        </div>
                    </div>
                    <div id="bookupdate">
                        <a href="#" th:href="|@{/shelf/read/}${item.id}/${shelf.sort}|">
                            <button type="button" class="layui-btn layui-btn-xs" >继续阅读</button>
                        </a>
                        <button onclick="del(this)" type="button" th:fictionId="${item.id}"
                                class="layui-btn layui-btn-xs layui-btn-danger">移出书架</button>
                    </div>
                </div>
                <div  th:if="${status.count%2==0}" class="dotline"></div>
            </div>
        </div>
        <div style="margin-top: 50px"></div>


    </body>
    <script th:src="@{https://code.jquery.com/jquery-3.7.0.js}"
            integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
            crossorigin="anonymous"></script>
    <script th:inline="javascript">
        function del(obj){
            if (!confirm("确定要把这本书移出书架吗")) return;
            let fictionId = $(obj).attr('fictionId');
            let url = "/shelf/"+fictionId;
            console.log(url);
            $.ajax({
                async: false,
                url: url,
                type: 'delete',
                success: function () {
                    location.reload();
                }
            });
        }

    </script>
</html>